<template>
  <a-layout style="height: 100%; width:100%;">
    <!-- 顶部导航栏 -->
    <a-layout-header style="display: flex; align-items: center;width: 100vw; background:#145E5B">
      <router-link to="/" class="nav-link">首页</router-link>
      <router-link to="/dataManager" class="nav-link">数据管理</router-link>
      <router-link to="/vectorTile" class="nav-link">矢量切片</router-link>
      <router-link to="/proxyManager" class="nav-link">代理管理</router-link>
    </a-layout-header>

    <!-- 页面内容区域 -->
    <a-layout-content style="background: #fff;">
      <router-view />
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts"></script>

<style scoped>
.nav-link {
  color: #fff;
  margin-right: 36px;
  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s;
}
.nav-link:hover {
  color: #40a9ff;
}
.router-link-active {
  font-weight: bold;
  color: #1890ff;
}
</style>
